<!--
 * @Description: 
 * @Author: yyh
 * @Date: 2022-03-03 00:24:37
 * @LastEditors: yyh
 * @LastEditTime: 2022-05-16 11:23:30
-->
<template>
  <el-container style="height: 100vh">
    <el-aside width="200px" style="background-color: #409eff">
      <div class="systemName">
        <h1>校园资产综合管理系统</h1>
      </div>
      <el-menu router :default-active="this.$route.path">
        <el-menu-item index="/Home">
          <i class="el-icon-s-home" style="color: red"></i>
          <span>首&nbsp;页</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu" style="color: orange"></i>资产管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="/Statements">资产图表</el-menu-item>
            <el-menu-item index="/Classification">资产分类管理</el-menu-item>
            <el-menu-item index="/Register">资产入库</el-menu-item>
            <el-menu-item index="/AssetList">资产列表管理</el-menu-item>
            <el-menu-item index="/Use">资产领用管理</el-menu-item>
            <el-menu-item index="/Borrowing">资产借用管理</el-menu-item>
            <el-menu-item index="/Maintenance">资产维修管理</el-menu-item>
            <el-menu-item index="/Scrap">资产报废管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-setting" style="color: black"></i>系统管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="/User">
              <i class="el-icon-user" style="color: #409eff"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="/UserInfo">
              <i class="el-icon-document" style="color: green"></i>
              <span slot="title">个人信息管理</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <iframe
          scrolling="no"
          src="https://tianqiapi.com/api.php?style=tx&skin=peach"
          frameborder="0"
          width="350"
          height="30"
          allowtransparency="true"
        ></iframe>
        <el-dropdown>
          <div>
            <el-avatar
              :src="circleUrl"
              size="medium"
              style="margin-right: 5px; margin-top: 12px"
            ></el-avatar>
            <div style="float: right; line-height: 60px">
              你好,{{ user.role }}
            </div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              ><div @click="toUserInfo">
                <i class="el-icon-document"></i>个人信息
              </div></el-dropdown-item
            >
            <el-dropdown-item
              ><div @click="logout">
                <i class="el-icon-switch-button"></i>退出登录
              </div></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      user: {
        role: ""
      },
      circleUrl:"",
    };
  },
  created() {
    this.getUserRole();
    this.getUserImg();
  },
  methods: {
    getUserRole() {
      this.user.role = sessionStorage.getItem("role");
    },
    getUserImg(){
      this.circleUrl = sessionStorage.getItem("img");
    },
    toUserInfo() {
      this.$router.push({ path: "/UserInfo" });
    },
    logout() {
      this.$confirm("此操作将注销登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sessionStorage.removeItem("id");
          this.$router.push("/");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
  },
};
</script>

<style>
.systemName {
  height: 60px;
  font-size: 16px;
  line-height: 60px;
  text-align: center;
}
.el-header {
  background-color: rgb(250, 250, 250);
  color: #333;
  box-shadow: 0 1px 5px rgb(80, 80, 80);
  line-height: 60px;
}

.el-aside {
  color: #fff;
}
</style>

